<template>
    <div class="netteach-add">
        <div class="netteach-crumbs">
            <router-link to="/netteach">网络教研</router-link>
            <!-- <span @click="goBack"><i>></i>{{prepare_name}} </span> -->
            <span><i>></i>发起评课</span>
        </div>
        <div class="netteach-add-content">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="活动主题" prop="theme">
                    <el-input v-model="ruleForm.theme" placeholder="最多可以输入20个字符"></el-input>
                </el-form-item>

                <el-form-item label="活动要求" prop="ask">
                    <el-input type="textarea" v-model="ruleForm.ask" :rows="4" placeholder="在此可输入活动要求(最多200字)" maxlength="200"></el-input>
                    <span class="word-number"><i>{{ruleForm.ask.length}}</i>/200</span>
                </el-form-item>

                <el-form-item label="评课视频" prop="video">
                	<el-button type="primary">选择</el-button>
                   <div class="tagList">
                       <el-tag :key="index"  v-for="(tag, index) in videoList" closable  :disable-transitions="false" @close="handleClose(index, 'video')">
                         {{tag}}
                       </el-tag>
                   </div>
                	<el-checkbox-group v-model="ruleForm.video">
                	    <el-checkbox :label="1" name="type">发起方</el-checkbox>
                	</el-checkbox-group>
                </el-form-item>

                <el-form-item label="活动时间" required class="date-time">

                    <el-form-item prop="startTime">
                       <el-date-picker v-model="ruleForm.startTime" :picker-options='pickerOptions' type="datetime" placeholder="选择开始时间"></el-date-picker>
                   </el-form-item>
                   <i>至</i>
                   <el-form-item prop="endTime">
                    <el-date-picker v-model="ruleForm.endTime" :picker-options='pickerOptions' type="datetime" placeholder="选择结束期时间"></el-date-picker>
                </el-form-item>

                </el-form-item>

                <el-form-item label="参与人" prop="participant">
                	<el-button type="primary">选择</el-button>
                    <div class="tagList">
                       <el-tag :key="index"  v-for="(tag, index) in participantList" closable  :disable-transitions="false" @close="handleClose(index, 'participant')">
                         {{tag}}
                       </el-tag>
                    </div>
                   <el-checkbox-group v-model="ruleForm.participant">
                       <el-checkbox :label="1" name="type">发起方</el-checkbox>
                   </el-checkbox-group>
                </el-form-item>

                <el-form-item label="评估标准" prop="standard">
                	<el-button type="primary">选择</el-button>
                    <div class="tagList">
                       <el-tag :key="index"  v-for="(tag, index) in standardList" closable  :disable-transitions="false" @close="handleClose(index, 'standard')">
                         {{tag}}
                       </el-tag>
                    </div>
                   <el-checkbox-group v-model="ruleForm.standard">
                       <el-checkbox :label="1" name="type">发起方</el-checkbox>
                   </el-checkbox-group>
                </el-form-item>


                <el-form-item label="算分方式" prop="mode">
                    <el-radio-group v-model="ruleForm.mode">
                        <el-radio :label="1">全部相加法：全部相加平均数</el-radio>
                        <el-radio :label="2">去除首尾法：参与人大于等于5的时候，去掉最大值和最小值后，相加求平均数；小于5则全部相加求平均数</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="评分明细公开范围" prop="range" class="netteach-range">
                    <el-checkbox-group v-model="ruleForm.range">
                        <el-checkbox :label="1" name="type">发起方</el-checkbox>
                        <el-checkbox :label="2" name="type">主讲教师</el-checkbox>
                        <el-checkbox :label="3" name="type">参与人</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>

                <el-form-item class="netteach-btn">
                    <el-button @click="resetForm('ruleForm')" type="primary" plain>取消</el-button>
                    <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
                </el-form-item>
            </el-form>


        </div>
    </div>
</template>

<script>
	
	export default{
		data(){
			return {
				ruleForm: {
					theme: '',
					ask: '',
					video: [],
					startTime: '',
                    endTime: '',
					participant: [],
					standard: [],
					mode: '',
					range: ''
				},
				videoList: ['视频一', '视频二', '视频三'],
                participantList: ['参与人一', '参与人二', '参与人三'],
                standardList: ['标准一', '标准二', '标准三'],
				rules: {
					theme: [
						{ required: true, message: '请输入活动名称', trigger: 'blur' },
						{ min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
					],
					ask: [
						{ required: true, message: '请输入活动要求', trigger: 'change' },
                        { min: 3, max: 200, message: '长度在 3 到 200 个字符', trigger: 'blur' }
					],
					video: [
						{ required: true, message: '请选择评课视频', trigger: 'change' }
					],
					startTime: [
						{ required: true, message: '请选择开始时间', trigger: 'change' }
					],
                    endTime: [
                        { required: true, message: '请选择结束时间', trigger: 'change' }
                    ],
					participant: [
						{ type: 'array', required: true, message: '请选择参与人', trigger: 'change' }
					],
					standard: [
						{ required: true, message: '请选择评估标准', trigger: 'change' }
					],
					mode: [
						{ required: true, message: '请选择写算分方式', trigger: 'change' }
					],
                    range: [
                        { required: true, message: '请选择评分明细公开范围', trigger: 'change' }
                    ]
				},
                pickerOptions: {
                    disabledDate:(time) => {
                        return time.getTime() < Date.now() - 8.64e7;
                    }
                },
			}
		},
		methods:{
            /*
                提交当前的数据
             */
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            /*
                返回上一页
             */
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            /*
                @ 删除对应条件的数据
                @ video 评课视频
                @ participant 参与人
                @ standard 评估标准
             */
			handleClose(index, coordinate) {
                switch(coordinate){
                    case 'video':
                        this.videoList.splice(index, 1);
                        break;
                    case 'participant':
                        this.participantList.splice(index, 1);
                        break;
                    case 'standard':
                        this.standardList.splice(index, 1);
                        break;
                }
			},
		}
	}
</script>